<template>
    <section>
      <p class="nav">
        <span class="right" @click="change()"><img  src="../assets/vary2.png" />经典模式</span>
      </p>
      <div class="main">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">待办件</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">待阅件</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">通知公告</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <span id="symbal">紧急</span>
                  <span class="flag">【急件】</span>
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">内部刊物</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">规章制度</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <p class="tip">
                <span class="tipLeft">软件下载</span>
                <span class="tipRight"> >> </span>
              </p>
              <ul>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>
                <li>
                  <!-- <span id="symbal">紧急</span> -->
                  <!-- <span class="flag">【急件】</span> -->
                  <span class="content">测试文件丢失,测试文件丢失...</span>
                  <span id="time">2018-08-23 14:35</span>
                </li>

              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
</template>

<script>

    export default {
        data() {
          return {

          };
        },
        methods: {
          change(){
            this.$router.push({name:'index2'});
          }
        }
  };
</script>

<style scoped="scoped">
  .nav{
    width: 100%;
  }
  .tip{
    float: left;
    width:100%;
  }
  .tipLeft{
    float: left;
    line-height: 30px;
    margin-left: 10px;
    color: blue;
    font-weight: bold;
  }
  .tipRight{
    float: right;
    line-height: 30px;
    margin-right: 10px;
    color: #666;
  }
  ul{
    list-style: none;
    float: left;
    height: 100%;
    width: 100%;
  }
  ul li{
    line-height: 50px;
    border-bottom: solid 0.1px #ccc;
    width: 100%;
    font-weight: normal;
    cursor: porinter;
  }
  ul li .content{
    margin-left: 5px;
    cursor: pointer;
  }
  #symbal{
    margin-left: 10px;
    color: red;
    border: 0.1px solid red;
    padding:1px;
  }
  #time{
    float: right;
    color: #666;
    margin-right: 10px;
    /* background: #000; */
  }
  .right{
    float: right;
    margin:10px 40px 20px 0;
    cursor: pointer;
    font-size: 12px;
    color: #3370d6;
  }
  .main{
    width: 94%;
    float: left;
    /* margin: 10px 10px; */
    margin-left: 40px;
    margin-right: 40px;
    /* padding-right: 10px; */
    font-size: 12px;
    /* position: relative; */
    /* border: 1px solid #000; */
  }
  .el-row {
    margin-bottom: 20px;
    /* margin-left:40px; */
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 390px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .right20{
    margin-right: 10px;
  }
</style>
